<template>
  <div class="demo-pagination-block">
    <el-pagination
      background
      v-model:currentPage="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="tenantArgument.maxResultCount"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    // 页码和页数
    let tenantArgument = reactive({ maxResultCount: 10, skipCount: 0 })
    // 分页事件
    const handleCurrentChange = (val: any) => {
      // currentPage.value = val
      tenantArgument.skipCount = val
      // console.log(tenantArgument.skipCount)
      // emit('handleCurrentChange', val)
      // console.log(props.tableData)
    }
    // 页码选择
    const handleSizeChange = (val: any) => {
      tenantArgument.maxResultCount = val
    }
    return { tenantArgument, handleCurrentChange, handleSizeChange }
  },
})
</script>

<style scoped></style>
